<template>
  <div>
    <!--    <div class="header">header</div>-->
    <!--    <div class="left">left</div>-->
    <!--    <div class="main">main</div>-->
    <Header></Header>
    <app-left></app-left>
    <app-main></app-main>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Left from "./Left";
import Main from "./Main";

export default {
  name: "Layout",
  components: {
    Header,
    "app-left": Left,
    "app-main": Main
  },
  data() {
    return {};
  },

  computed: {},

  watch: {},

  methods: {},

  activated() {
  }
};

</script>

<style scoped>
.header {
  position: absolute;
  line-height: 50px;
  padding: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #2d3a4b;
}

.left {
  position: absolute;
  width: 230px;
  top: 50px;
  left: 0px;
  bottom: 0px;
  overflow-y: auto;
  background-color: #545c64;
}

.main {
  position: absolute;
  top: 50px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  padding: 10px;
  overflow-y: auto;
  //background-color: #605f47;
}
</style>
